<template>
  <div class="deviceOrder unified-bg">
    <div class="main">
      <div class="box">
        <div class="top">
          <div style="position: relative">
            <span class="icon-xyj we-icon" v-if="$route.params.deviceTypeId === '1'"></span>
            <span class="icon-hgj we-icon" v-else></span>
            <div class="li1-main1">
              <div class="li1-sub1">
                <p class="p1 color-6">{{ $route.params.sn }}</p>
                <p class="p2 color-9">设备编号</p>
              </div>
              <div class="li1-sub2">
                <p class="color-6">{{ $route.params.venderName }}</p>
                <p class="p2 color-9"> 厂家</p>
              </div>
            </div>
          </div>
        </div>
        <div class="address">
          地址：
          <span class="color-4c">{{ $route.params.address }}</span>
        </div>
      </div>
      <div class="order-wrap">
        <div class="list-warp"
             v-infinite-scroll="query"
             infinite-scroll-disabled="faultLloading"
             infinite-scroll-immediate-check="false"
             infinite-scroll-distance="50">
          <div class="content" v-for="(item, index) in list"><div class="order">
            <div class="top" v-if="index === 0 || formatDate1(item.payTime) !== formatDate1(list[index - 1].payTime)">
              <p class="day dayM" v-if="formatDate1(item.payTime) === formatDate1(new Date())"> 今天</p>
              <p class="day dayM" v-else-if="formatDate1(item.payTime) === formatDate1(Date.now() - 86400000)"> 昨天 </p>
              <p class="day" v-else>{{ formatDate1(item.payTime) }} </p>
            </div>
            <supOrder :item="item"></supOrder>
          </div>
          </div>
          <div class="weui-loadmore" v-show="faultLloading && !noData">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
          </div>
          <noData v-if="isData">
            <p>暂无数据</p>
          </noData>
          <div v-else>
            <div class="weui-loadmore weui-loadmore_line" v-show="noData">
              <span class="weui-loadmore__tips">我是有底线的</span>
            </div>
          </div>
        </div>
      </div>
      </div>
  </div>
</template>
<script>
  import * as api from 'api';
  import formatDate from '../../../utils/transformTime';
  import noData from '@/components/noData';
  export default {
    data () {
      return {
        isData: false,
        timeAll: '',
        t: '',
        page: 0,
        faultLloading: false,
        noData: false,
        loading: false,
        list: [],
        arr: []
      }
    },

    methods: {
      // 调用时间
      showDate () {
        this.$vux.datetime.show({
          cancelText: '取消',
          confirmText: '确定',
          format: 'YYYY-MM-DD HH',
          value: '2017-05-20 18'
        })
      },
      query (loadMore) {
        this.faultLloading = true;
        api.deviceOrder({
          agencyId: this.$store.state.userInfo.id,
          limit: 10,
          offset: this.page * 10,
          deviceId: this.$route.params.deviceId
        })
          .then(res => {
            this.list = this.list.concat(res.resultData);
            if (this.list.length === 0) {
              this.isData = true
            } else {
              this.isData = false
            }
            if (this.list.length >= +res.total) {
              this.faultLloading = true;
              this.loading = false;
              this.noData = true;
            } else {
              this.faultLloading = false;
              this.loading = false;
              this.page++;
            }
          })
      },
      yesToday () {
        return new Date(new Date() - 24 * 60 * 60 * 1000).getDate()
      },
      formatDate1 (argm) {
        return formatDate(new Date(+argm));
      }
    },

    components: {
      supOrder: require('./supOrder.vue'),
      noData
    },

    created () {
      this.query()
    }
  }
</script>
<style  lang="scss">
  @import '../../../styles/common/common';
  .deviceOrder {
    @include wh(100%, 100%);
    position: relative;
    font-size: px2rem(26);
    .main {
      @include wh(100%, 100%);
      position: relative;
      margin-top: px2rem(86);
      color: #999;
      padding: 0 px2rem(40);
      .order-wrap {
        position: absolute;
        bottom: 0;
        top: px2rem(250);
        left: px2rem(40);
        right: px2rem(40);
        padding-bottom: 0;
        margin-bottom: px2rem(50);
      }
      .list-warp {
        padding-bottom: 0;
      }
      .box {
        box-shadow: 0px 5px 5px #f1f1f0;
        margin-bottom: px2rem(20);
        .top {
          background: #fff;
          @include borderRadius(5px 5px 0 0);
          @include wh(100%, auto);
          padding: px2rem(25) px2rem(30) px2rem(10) px2rem(30);
          position: relative;
          .we-icon {
            position: absolute;
            left: px2rem(0);
            top: px2rem(0);
          }
          .li1-main1 {
            @include fj();
            padding: px2rem(10) px2rem(100) 0 px2rem(125);
            .li1-sub1 {
              .p1 {
                font-size: px2rem(28);
              }
              .p2 {
                margin-bottom: px2rem(10);
                @include hl(px2rem(40));
                font-size: px2rem(24);
              }
            }
            .li1-sub2 {
              .p1 {
                font-size: px2rem(28);
              }
              .p2 {
                margin-bottom: px2rem(10);
                @include hl(px2rem(40));
                font-size: px2rem(24);
              }
            }
          }
          .date-box {
            padding: px2rem(20) 0 px2rem(30);
            .li1-main2 {
              background: #fff;
              font-size: px2rem(24);
              @include fj();
              padding-bottom: px2rem(10);
            }
            p {
              font-size: px2rem(24);
              span {
                font-size: px2rem(26);
              }
            }
          }
          .line {
            @include wh(px2rem(554), auto);
            border-top: 1px dashed $bdc;
          }
        }
        .address {
          @include borderRadius(0 0 5px 5px);
          font-size: px2rem(26);
          background: #fff;
          border-top: 2px solid $bdc;
          padding: px2rem(20) px2rem(30);
          text-align: justify;
          span {
            font-size: px2rem(28);
          }
        }
      }
      .content {
        .order {
          .top {
            text-align: center;
            padding-top: px2rem(20);
            .day {
              @include hl(px2rem(45));
              max-width: px2rem(200);
              margin: 0 auto;
              @include borderRadius(30px);
              color: #fff;
              background: #969da0;
              font-size: px2rem(28);
            }
            .dayM {
              width: px2rem(110);
            }
            .time {
              font-size: px2rem(24);
              padding: px2rem(6);
            }
          }
          .center {
            background: #fff;
            padding: px2rem(20) px2rem(30) 0;
            @include borderRadius(5px);
            box-shadow: 5px 5px 5px #f1f1f0;
            .flexBox {
              @include fj();
              border-bottom: 1px solid $bdc;
              padding-bottom: px2rem(15);
              .left {
                color: #4d4d4d;
                font-size: px2rem(28);
                div {
                  span {
                    color: #ff684a;
                    padding-left: px2rem(15);
                    i {
                      padding-left: px2rem(5);
                      font-size: px2rem(36);
                    }
                  }
                }
              }
              .right {
                font-size: px2rem(24);
                text-align: right;
              }
              .complete {
                @include hl(px2rem(90))
              }
              .cancel {
                @include hl(px2rem(90))
              }
            }
            .footerBox {
              font-size: px2rem(24);
              @include fj();
              @include hl(px2rem(84));
            }
          }
          .time-box {
            text-align: center;
            padding: px2rem(6) 0  px2rem(6);
          }
        }
      }
    }
  }
</style>
